<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<script src="waiter.js"></script>
<link type="text/css" rel="stylesheet" href="assets/SyntaxHighlighter.css"></link>
<script language="javascript" src="assets/shCore.js"></script>
<script language="javascript" src="assets/shBrushJScript.js"></script>


<script>
function countDown(count) {
    window.waiter.setMessage({ targetId : 'body',
                               message : 'Complete in ' + count + ' seconds.'});
    if (count >= 0) {
        count--;
        setTimeout(function() { 
            countDown(count)
            }, (count * 1000));
    } else {
        window.waiter.hide({ targetId : 'body'});
    }
}

function timedWaiter() {

  window.waiter.show({ speed: 3,
                       delay : 40,
                       targetId : 'body',
                       textColor : '#FFF',
                       background: 'pink',
                       opacity : 85,
                       message : 'Please wait 2'});
  countDown(3);
}
</script>
<style type="text/css">
.link {
  color:#000;
  text-decoration:none;
}

.link:hover {
    text-decoration:underline
}

</style>
</head>
<body>

<div style="font-size:32px">Ajax Waiter -  Full Screen Test</div>
<div style="float:right"><a href="tests.html" class="link">Tests</a> | <a href="index.html" class="link">Home</a></div>
<div style="clear:right;height:3px;background:#9C9;border-bottom:1px solid #000"></div>

<p>
This test shows a full screen test of the Ajax waiter. To use full screen simply provide the <code>targetId</code> of body or do not provide a <code>targetId</code> and the waiter will take the full screen.
</p>


<table style="cell-padding:0;border:0">
<tr>
<td>
<a href="javascript:timedWaiter()">Show wait dialog</a>
</td>
<td style="width:700px">
<pre name="code" class="javascript">

&lt;a href="javascript:timedWaiter()"&gt;Show wait dialog&lt;/a&gt;

&lt;script&gt;
    function countDown(count) {
        window.waiter.setMessage({ targetId : 'body',
                                   message : 'Complete in ' + count + ' seconds.'});
        if (count >= 0) {
            count--
            setTimeout(function() { 
                countDown(count)
                }, (count * 1000));
        } else {
            window.waiter.hide({ targetId : 'body'});
        }
    }
    
    function timedWaiter() {
    
      window.waiter.show({ speed: 1,
                           delay : 40,
                           targetId : 'body',
                           textColor : '#FFF',
                           background: 'pink',
                           opacity : 85,
                           message : 'Please wait'});
      countDown(3);
    }
&lt;/script&gt;
</pre>
</td>
</tr>


</table>
</div>


<div id="messages"></div>
</div>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'asstets/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>